<template>
  <div class="top-navigation">
    <template v-if="folderList.length > 0">
      <span class="back link" @click="backParent">返回上一级</span>
      <el-divider direction="vertical"></el-divider>
    </template>
    <!-- <span v-if="folderList.length == 0" class="all-file"> 全部文件 </span>
    <span v-if="folderList.length > 0" class="link"> 全部文件 </span> -->
    <span
      :class="[folderList.length == 0 ? 'all-file' : 'link']"
      @click="setCurrentFolder(-1)"
    >
      全部文件
    </span>
    <div v-for="(item, index) in folderList" :key="index">
      <span class="iconfont icon-right"></span>
      <!-- 点击方法要判断是否为当前目录 -->
      <span
        :class="[index == folderList.length - 1 ? 'text' : 'link']"
        @click="setCurrentFolder(index)"
        >{{ item.fileName }}</span
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { GetFolderInfo } from "@/api/fileInfo.js";
import { GetFolderInfo4Share } from "@/api/showShare.js";
import { GetFolderInfo4Admin } from "@/api/admin.js";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const props = defineProps({
  watchPath: {
    type: Boolean,
    default: true,
  },
  //   分享
  shareId: {
    type: String,
  },
  // 判断接口类型 1：用户目录 2：分享目录 3：管理员
  caseType: {
    type: Number,
  },
});
// 分类
const category = ref();
// 目录集合
const folderList = ref([]);
// 当前目录
const currentFolder = ref({
  fileId: "0",
});
// 页面初始化
const init = () => {
  folderList.value = [];
  currentFolder.value = {
    fileId: "0",
  };
  doCallback();
};
const emit = defineEmits(["navChange"]);
const doCallback = () => {
  emit("navChange", {
    categoryId: category.value,
    curFolder: currentFolder.value,
  });
};
const openFolder = (data) => {
  // 目录名字和id
  const { fileId, fileName } = data;

  const folder = {
    fileName: fileName,
    fileId: fileId,
  };
  folderList.value.push(folder);
  currentFolder.value = folder;
  setPath();
};

defineExpose({ openFolder });
// 返回上一级
const backParent = () => {
  let currentIndex = null;
  for (let i = 0; i < folderList.value.length; i++) {
    if (folderList.value[i].fileId == currentFolder.value.fileId) {
      currentIndex = i;
      break;
    }
  }
  setCurrentFolder(currentIndex - 1);
};
// 点击导航 设置当前目录
const setCurrentFolder = (index) => {
  if (index == -1) {
    // 返回全部
    currentFolder.value = {
      fileId: "0",
    };
    folderList.value = [];
  } else {
    currentFolder.value = folderList.value[index];
    folderList.value.splice(index + 1, folderList.value.length);
  }
  setPath();
};
const setPath = () => {
  if (!props.watchPath) {
    // TODO:设置不监听路由回调方法
    doCallback();
    return;
  }
  let pathArray = [];
  folderList.value.forEach((item) => {
    pathArray.push(item.fileId);
  });
  console.log(pathArray);
  router.push({
    path: route.path,
    query: pathArray.length == 0 ? "" : { path: pathArray.join("/") },
  });
};

// 获取当前路径的目录
// 刷新页面导航重新获取路径
const getNavigationFolder = async (path) => {
  let params = {
    path: path,
    shareId: props.shareId,
  };
  let result;
  switch (props.caseType) {
    // 用户目录
    case 1:
      result = await GetFolderInfo(params);
      if (!result) {
        return;
      }
      folderList.value = result.data;
      break;
    //   分享
    case 2:
      result = await GetFolderInfo4Share(params);
      if (!result) {
        return;
      }
      folderList.value = result.data;
      break;
    //   管理员
    case 3:
      result = await GetFolderInfo4Admin(params);
      if (!result) {
        return;
      }
      folderList.value = result.data;
      break;
  }
};

watch(
  () => route,
  (newVal, oldVal) => {
    // 设置监听路径为false就不监听
    if (!props.watchPath) {
      return;
    }
    // 不处于/main/all就不监听
    if (
      newVal.path.indexOf("/main") === -1 &&
      newVal.path.indexOf("/settings/fileList") === -1 &&
      newVal.path.indexOf("/share") === -1
    ) {
      return;
    }
    const path = newVal.query.path;
    category.value = newVal.params.category;
    if (path == undefined) {
      init();
    } else {
      getNavigationFolder(path);
      // 刷新的时候要传当前目录的信息
      let pathArray = path.split("/");
      currentFolder.value = {
        fileId: pathArray[pathArray.length - 1],
      };
      doCallback();
    }
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.top-navigation {
  font-size: 13px;
  display: flex;
  align-items: center;
  line-height: 40px;
  .all-file {
    color: var(--icon);
  }
  .link {
    color: var(--theme2);
    cursor: pointer;
  }
  .icon-right {
    // color: var(--theme2);
    padding: 0px 5px;
    font-size: 13px;
  }
}
</style>